<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>找房无忧-首页</title>
    <link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/jquery-1.12.3.min.js"></script>
    <script src="../js/html_px.js"></script>
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/header.css">
    <script src="../js/public.js"></script>


</head>
<body>
<!--引入头部-->
<header id="header" >
    <div class="icon" >
        <div id="logo"><img src="../img/index/logo.png"/></div>
        <div id="my"><img class="" src="../img/index/my.png"/></div>
        <div id="xiazai"><img class="" src="../img/index/xiazai.png"/></div>
    </div>
</header>

<!--主主体部分-->
<div id="main">
    <div id="input" class="input-group">
        <input type="text" class="form-control" placeholder="输入小区或商圈名开始找房喽！">
    </div>
</div>
<!--*********************** 租房图标部分*******************************-->
<div id="iconList">
    <ul>
        <li>
            <img src="../img/index/index_03.png"/>
            <p>二手房</p>
        </li>
        <li>
            <img src="../img/index/index_05.png"/>
            <p>新房</p>
        </li>
        <li>
            <img src="../img/index/index_07.png"/>
            <p>租房</p>
        </li>
        <li>
            <img src="../img/index/index_09.png"/>
            <p>买房</p>
        </li>
    </ul>
</div>

<!--**************找房无忧大图部分**************************-->
<div id="banner"></div>
<!--********************热门房源部分***************************-->
<div id="hot">
    <div>
        <h3>热门房源</h3>
        <p>Hot House</p>
    </div>
</div>
<!--***************房源列表部分************-->
<div id="houseList" class="media">
    <ul>
        <li>
            <div class="media-left">
                <img  src="../img/index/img1.jpg"/>
            </div>
            <div class="media-body">
                <div>
                    <h2><b>文化部最T中间层 一层带...</b></h2>
                </div>
                <div class="des1">
                    <p><b>2室1厅 96㎡ 南北 </b></p>
                    <p class="des1_right">1105万</p>
                </div>
                <div class="des2">
                    <p>红庙北里</p>
                    <p class="des2_right">14268元/平</p>
                </div>
                <div class="des3">
                    <span>学区房</span> <span>独家</span>
                </div>
            </div>
        </li>
        <li>
            <div class="media-left">
                <img  src="../img/index/img2.png"/>
            </div>
            <div class="media-body">
                <div>
                    <h2><b>光大水墨 精装复式 稀缺...</b></h2>
                </div>
                <div class="des1">
                    <p><b>2室1厅 96㎡ 南北 </b></p>
                    <p class="des1_right">280万</p>
                </div>
                <div class="des2">
                    <p>光大水墨</p>
                    <p class="des2_right">14268元/平</p>
                </div>
                <div class="des3">
                    <span>学区房</span> <span>独家</span><span>满五唯一</span>
                </div>
            </div>
        </li>
        <li style="border:0">
            <div class="media-left">
                <img  src="../img/index/img3.png"/>
            </div>
            <div class="media-body">
                <div>
                    <h2><b>南北通透两居 精装修 无...</b></h2>
                </div>
                <div class="des1">
                    <p><b>2室1厅 96㎡ 南北 </b></p>
                    <p class="des1_right">320万</p>
                </div>
                <div class="des2">
                    <p>北京新天地</p>
                    <p class="des2_right">14268元/平</p>
                </div>
                <div class="des3">
                    <span>地铁房</span> <span>独家</span>
                </div>
            </div>
        </li>
    </ul>
</div>
<!--*****************底部切换部分*******************-->
<div id="switch">
    <ul >
        <li class="active"><a>热门关注</a></li>
        <li><a>友情链接</a></li>
    </ul>
    <div id="pane0">
        <ul>
            <li>北京二手房</li>
            <li>北京找房无忧</li>
            <li>北京二手房价</li>
            <li>青年家园</li>
            <li>海淀日租房</li>
            <li>免税房源</li>
            <li>朝阳新房</li>
            <li>满五年唯一免税...</li>
        </ul>
    </div>
    <div id="pane1">
        <ul>
            <li>淘宝网</li>
            <li>天猫网</li>
            <li>京东网</li>
            <li>一号店</li>
            <li>拼多多</li>
            <li>蘑菇街</li>
        </ul>
    </div>
</div>

<!--引入底部-->
<footer>
    <footer >
        <div id="foot_content">
            <h3>北京找房无忧 > 首页</h3>
            <div id="phone">
                <ul>
                    <li>
                        <div class="media-left">
                            <img src="../img/index/apple.png" />
                        </div>
                        <div class="media-body">
                            <p>iPhone</p>
                            <p>客户端</p>
                        </div>
                    </li>
                    <li>
                        <div class="media-left">
                            <img src="../img/index/android.png" />
                        </div>
                        <div class="media-body">
                            <p>Android</p>
                            <p>客户端</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="copy">
                <p>北京找房无忧房地产经纪公司</p>
                <p>网络经营许可证京ICP备20160812号</p>
            </div>
        </div>
    </footer>
</footer>
<!--底部固定导航-->
<div id="bottom" class=" nav navbar-fixed-bottom">
    <div id="close">
        <img src="../img/index/close.png" />
    </div>
    <div id="bottom_center">
        <div class="media-left">
            <img src="../img/index/download.png" />
        </div>
        <div class="media-body">
            <p>找房无忧</p>
            <p id="bottom_center_bot">市场行情，一手掌握</p>
        </div>
    </div>
    <div id="bottom_right">
        <span> 免费下载</span>
    </div>
</div>
<script language="javascript">
    setRem();
    $(function(){
        $(window).bind("resize",function(){
            setRem();
        });
//        底部固定部分关闭
        $("#close").click(function(){
            $("#bottom").hide();
        })
    });
    $("#switch ul li").click(function(){
        active($(this))
    })

</script>
</body>
</html>